import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import welcomeImage from '../assets/welcome.jpg';

const WelcomePage = () => {
    const [countdown, setCountdown] = useState(5);
    const navigate = useNavigate();

    useEffect(() => {
        const timer = setTimeout(() => {
            setCountdown((prevCount) => {
                if (prevCount > 1) {
                    return prevCount - 1;
                } else {
                    navigate('/login'); // 跳转
                    return 0; // 结束计时
                }
            });
        }, 1000);

        return () => clearTimeout(timer); // 清除计时器
    }, [countdown, navigate]);

    return (
        <div
            style={{
                position: 'relative',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh',
                width: '100vw'
            }}
            onTouchMove={(e) => e.preventDefault()}
        >
            <img src={welcomeImage} alt="Welcome" style={{ width: '100%', height: '100%', objectFit: 'fill' }} />
            <div
                style={{
                    position: 'absolute',
                    top: '20px',
                    right: '20px',
                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
                    color: 'white',
                    padding: '10px',
                    borderRadius: '5px'
                }}
            >
                {countdown} 跳转
            </div>
        </div>
    );
};

export default WelcomePage;
